<template>
    <div class="home">
        <div class="home-seek">
            <router-link to="/seek" tag="div" class="info1">
                <i class="iconfont icon-iconseek01"></i>
                <span>请输入关键字</span>
            </router-link>
        </div>
        <div class="home-banner">
            <mt-swipe :auto="4000">
                <mt-swipe-item v-for='(item,key) in slideshow_list' :key='key'>
                    <router-link :to='item.go_url' tag='div'><img :src="item.img_url" alt=""></router-link>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="home-nav">
            <div class="nav-1">
                <ul>
                    <router-link :to="item.go_url" tag="li" v-for='(item,key) in index_nav' :key='key'>
                        <span v-text='item.title'></span>
                        <i class="iconfont" :class='item.icon'></i>
                    </router-link>
                </ul>
            </div>
            <div class="nav-2">
                <ul>
                    <router-link :to="{path:'/classes_template',query:{ id:item.c_id }}" tag="li" v-for="(item,key) in classify_list" :key="key">{{item.c_name}}
                    </router-link>
                    <div class="clearfix"></div>
                </ul>
            </div>
        </div>
        <div class="home-video">
            <video :src="news.video.video_url" controls preload :poster="news.video.cover_url" :title='news.video.title'></video>
            <!--<video src="news.video.cover_url" controls preload poster="news.list.cover_url"></video>-->
        </div>
        <div class="home-message">
            <ul>
                <router-link tag='li' v-for='(item,key) in news.list' :key='key' to='/'>
                    <img :src="item.cover_url" alt="">
                    <div>
                        <p class="clamp">{{item.title}}</p>
                    </div>
                </router-link>
                <li>
                    <img src="../images/message/message1.png" alt="">
                    <div>
                        <img src="../images/message/title.png" alt="" class="last-img">
                    </div>
                </li>
                <li>
                    <img src="../images/message/message1.png" alt="">
                    <div>
                        <img src="../images/message/title.png" alt="" class="last-img">
                    </div>
                </li>
                <div class="clearfix"></div>
            </ul>
        </div>
        <div class="home-goods">
            <div v-for="item in goodsList">
                <div class="goods-title">
                    <span>BLONIC</span><span>{{item.c_name}}</span>
                </div>
                <div class="goods-info">
                    <ul>
                        <router-link tag='li' :to="{path:'/product_details',query:{ id:item1.goods_id }}" v-for="(item1,key1) in item.son" :key='key1'>
                            <img :src="item1.cover_url" alt="">
                        </router-link>
                        <div class="clearfix"></div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>暂无更多</p>
        </div>
        <div class='loading' v-show="load"><div class='div1'><mt-spinner type="fading-circle" color='#0F7AE0' :size='50'></mt-spinner></div></mt-spinner></div>
    </div>
</template>
<script typy="text/ecmascript-6">
    export default {
        name: 'Home',
        data () {
            return {
                slideshow_list: [],
                index_nav: [],
                classify_list: [],
                news: [],
                goodsList: [],
                video_url:'',
                load:true
            }
        },
        beforeCreate () {
            this.load = true;
            console.log('loading:'+this.load);
        },
        created(){
            const that = this;
            const url = that.getUrl('index')
            that.$http.get(url).then(res => {
                // success callback
                that.slideshow_list = res.data.data.slideshow_list;
                debugger;
                that.index_nav = res.data.data.index_nav;
                that.classify_list = res.data.data.classify_list;
                that.news = res.data.data.news;
                that.goodsList = res.data.data.goods_list;
            }, err => {
                // error callback
                console.log(4044);
            });

        },
        mounted(){
            this.load = false;
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../../lib/less/variable";
    @import "../../lib/less/normalize";
.loading{
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    text-align: center;
    overflow: hidden;
    .div1{
        .w(100);
        .h(100);
        .mt(-50);
        position: relative;
        left: 50%;
        top: 50%;
    }
}
    .home {
        .mb(50);
        /*顶部搜索*/
        .home-seek {
            background: #fff;
            width: 100%;
            .h(35);
            .padding(5, 5);
            box-sizing: border-box;
            .info1 {
                width: 100%;
                border: 1px solid #ccc;
                border-radius: 2px;
                width: 100%;
                i {
                    .ml(5);
                    .fs(22);
                    vertical-align: middle;
                }
                span {
                    .fs(14);
                    color: #ccc;
                }

            }
        }
        /*轮播banner*/
        .home-banner {
            width: 100%;
            .h(225);
            img {
                width: 100%;
            }
        }
        /*导航nav*/
        .home-nav {
            width: 100%;
            .nav-1 {
                width: 100%;
                background: #fff;
                .h(60);
                .lh(30);
                text-align: center;
                ul {
                    width: 100%;
                    display: flex;
                    li {
                        flex: 1;
                        i, span {
                            display: block;

                        }
                        span {
                            .fs(12);
                        }
                        i {
                            .fs(30);
                            position: relative;
                            .top(-5)

                        }
                    }
                }
            }
            .nav-2 {
                width: 100%;
                background: #fff;
                .mt(8);
                ul {
                    width: 100%;
                    text-align: center;
                    box-sizing: border-box;
                    li {
                        width: 22%;
                        .h(25);
                        .lh(25);
                        float: left;
                        border: 1px solid #000;
                        .ml(5);
                        .mt(5);
                        .mb(5);
                        .mr(5);
                        box-sizing: border-box;
                        .fs(14)

                    }
                }

            }
        }
        /*视频*/
        .home-video {
            width: 100%;
            video {
                width: 100%;
                .h(240);
            }
        }
        /*资讯*/
        .home-message {
            width: 100%;
            .mt(10);
            ul {
                li {
                    display: inline-block;
                    width: 33.33%;
                    .h(180);
                    float: left;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                    .last-img {
                        width: 100%;
                        .h(90);
                        position: relative;
                        top: -200%;
                    }
                    div {
                        width: 100%;
                        .h(30);
                        .lh(15);
                        background: #000;
                        opacity: 0.8;
                        position: relative;
                        .top(-45);
                        p {
                            // display:block;             /*内联对象需加*/
                            // word-break:keep-all;       /* 不换行 */
                            // white-space:nowrap;        /* 不换行 */
                            // overflow:hidden;           /* 内容超出宽度时隐藏超出部分的内容 */
                            // text-overflow:ellipsis;    /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
                            // color: #fff;
                            word-break: break-all;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            width: 100%;
                            .fs(12);
                            color: #fff;
                        }
                    }
                }
            }
        }
        /*商品详情*/
        .home-goods {
            width: 100%;
            background: #fff;
            .mt(10);
            .goods-title {
                width: 100%;
                text-align: center;
                .fs(16);
                .h(45);
                .lh(45);
                span:first-child {
                    color: #0F7AE0;
                    font-weight: bold;
                    .pr(5)
                }
            }
            .goods-info {
                width: 100%;
                ul {
                    li {
                        width: 50%;
                        float: left;
                        .padding(0, 5);
                        .pb(5);
                        box-sizing: border-box;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }

    }

</style>
